<template>
  <div class="city">
    <my-heard />
    <div class="center">
      <!-- 页标题 -->
      <div class="page_title">
        <h1>
          <span>探索</span>
          <span>巴黎</span>
        </h1>
      </div>
      <!-- 图片展示区 -->
      <div class="f2">
        <div id="city_show">
          <div class="col_1">
            <div>
              <img
                src="/detail_f2_img/img1/02Y2h120009fq62w00A92_R_1080_808_Q90.jpg"
              />
            </div>
          </div>
          <div class="col_2">
            <div>
              <img src="/detail_f2_img/img1/caption.jpg" />
            </div>
            <div>
              <img
                src="/detail_f2_img/img1/02Y1z120008sbbfcz556D_R_1080_808_Q90.jpg"
                alt=""
              />
            </div>
          </div>
        </div>
      </div>
      <!-- 城市介绍 -->
      <div class="city_intro">
        <h1>关于巴黎</h1>
        <p>
          世界上没有任何地方像巴黎一样，仅仅提起她的名字便能让人心神荡漾。
          这座城市魅力非凡，拥有不同凡响的艺术品、建筑、文化瑰宝和美食，但这里还有更鲜为人知的梦幻景致待您探索：
          铺满鹅卵石的别致街道、转角处香气四溢的面包店，还有非常适合享用一杯博若莱的舒适小酒馆。
          准备好踏上独一无二的巴黎之旅。
        </p>
      </div>
      <recom-mend />
      <recom-mend />
    </div>
    <my-foot />
  </div>
</template>

<script>
import RecomMend from "@/components/RecomMend.vue";
export default {
  components: { RecomMend },
  data() {
    return {
      value: 3.5,
      swiperOption: {
        slidesPerView: 3,
        spaceBetween: 30,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
      },
    };
  },
};
</script>
<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

.center {
  margin: 0 auto;
  width: 1200px;
}

.page_title {
  font-size: 30px;
  margin: 25px 0;

  span:first-child {
    color: red;
  }
}

#city_show {
  width: 100%;
  height: 20%;
  display: flex;
  flex-flow: row wrap;

  img {
    display: block;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: 1s;
  }

  img:hover {
    transform: scale(1.1);
  }

  .col_1 {
    width: 700px;
    height: 100%;

    > div {
      width: 700px;
      height: 500px;
      border: 1px;
      overflow: hidden;
    }
  }

  .col_2 {
    width: 500px;
    height: 100%;
    display: flex;
    flex-flow: column wrap;
    // >div:first-child{
    //   padding-bottom: 2px;
    // }

    > div {
      width: 500px;
      height: 250px;
      overflow: hidden;

      // box-sizing: border-box;
    }
  }
}

.city_intro {
  h1 {
    margin-top: 50px;
    margin-bottom: 20px;
  }

  p {
    font-size: 20px;
    font-weight: 20;
  }
}
</style>
